<template>
  <!-- 草稿箱 -->
  <!-- 草稿箱数据渲染页 -->
  <div class="item-lists">
    <!-- 头部搜索 -->
    <SearchBar @onSearch="onSearch"/>
    <!-- 返回到商品列表页 -->
    <el-button type="warning" @click="$router.push('../ItemLists')" >返回到商品列表页</el-button>
    <!-- 表格 -->
    <el-table :data="items" style="width: 100%;margin-top:15px;height: 500px">
    <el-table-column prop="itemName" label="商品名称" />
    <!-- 封面 -->
    <el-table-column prop="thumb" label="封面"  >
      <template #default="{row}">
          <img :src="row.thumb" width="80" height="80" alt="">
          <!-- {{ row.thumb  thumb是封面 }} -->
        </template>
    </el-table-column>
    <!-- 商品销量 -->
    <el-table-column prop="sale" label="销量"  width="150">
      <template #default="{row}">
        <el-tag :color="row.sale > 500 ? 'rgb(194, 39, 39)' : 'rgb(103, 188, 82)'" class="textTag">
          {{ row.sale }}
        </el-tag>
          <!-- {{ row.sale  sale是商品销量 }} -->
        </template>
    </el-table-column>
    <!-- 商品价格 -->
    <el-table-column prop="price" label="价格"  width="100">
      <template #default="{row}">
        <span>{{ row.price }}</span>
          <!-- {{ row.price  price是价格 }} -->
        </template>
    </el-table-column>
    <!-- 商品描述 -->
    <el-table-column prop="desc" label="商品描述" width="170" >
      <template #default="{row}">
        <el-tooltip
        class="box-item"
        effect="light"
        :content="row.desc"
        placement="bottom"
        popper-class="text-hove"
      >
      <span>{{ row.desc.substr(0, 18) + "..." }}</span>
            <!-- {{ row.desc  desc是商品描述 }} -->
      </el-tooltip>
        
        </template>
    </el-table-column>
    <!-- 商品上下架 -->
    <el-table-column prop="onsale" label="上下架"  >
      <template #default="{row}">
          <el-switch
          disabled
            v-model="row.onsale"
            style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
            :active-value="1"
            :inactive-value="0"
            @change="swicthOnsale(row.id, row.onsale)"
          />
        </template>
    </el-table-column>
    <!-- 商品创建时间 -->
    <el-table-column prop="createAt" label="创建时间"  >
      <template #default="{row}">
        <span>{{ row.createAt }}</span>
          <!-- {{ row.createAt  createAt是商品创建时间 }} -->
        </template>
    </el-table-column>
    <!-- 操作(编辑、删除) -->
    <el-table-column  label="操作" >
      <template #default="{row}">
          <el-button type="success" @click="showUpdateDialog(row)"  size="small">再次编辑</el-button>
          <el-button type="danger" @click="delItem(row.id)" size="small">删除</el-button>
        </template>
    </el-table-column>
  </el-table>
  <!-- 表格 -->
  <!-- 分页组件 -->
  <el-pagination
      layout="prev, pager, next, sizes, jumper, total"
      v-model:current-page="page"
      v-model:page-size="pageSize"
      background :total="total"
      @size-change="sizeChange"
      @current-change="pageChange"
      style="margin-top:15px;"
      />
  </div>
</template>

<script  setup lang="ts" name="ItemDraft">
import { ref, reactive, onMounted } from 'vue'
import { ElLoading, ElMessage, ElMessageBox } from 'element-plus'
import { fetchCateLists , updateCate , delCate } from '@a/cateLists'
import { fetchItemLists } from '@a/itemLists'
// 引入pinia
import useGoodsItemUp from '@/stores/ItemUp'
import useSave from '@/stores/preservation'

// 引入关键字搜索
import SearchBar from '@c/SearchBar.vue';
import { useRoute,useRouter } from 'vue-router';
import type UpdateCate from './components/UpdateCate.vue';
const route = useRoute()
const router = useRouter()
// 点击显示编辑弹窗页 废弃
const itemUpdateShow = ref<boolean>(false)
// 新增商品分类的弹窗 废弃
const itemAddShow = ref<boolean>(false)
// 预留一下当前商品的id
const itemId = ref<number>(-1)
// 获取商品描述  废弃
// const descs = ref<string>('')
// const over = (desc:any) => {
//   console.log(desc);
//   descs.value = desc
// }
// 仓库实例
const itemStores = useGoodsItemUp()
const draftsStores = useSave()
// console.log(draftsStores);


// 列表数据
const items = ref<any[]>([])
// 一共多少条
const total = ref<number>(0)
// 第几页
const page = ref<number>(1)
// 一页多少条
const pageSize = ref<number>(10)
// 关键字
const keyWords = ref<string>('')
// 
let itemName = ref<string>('')

// 点击编辑按钮
const showUpdateDialog = (row:any) => {
  // itemStores.$patch({
  //   commodityFrom: itemStores.commodityFrom = row
  // })
  // 已经把商品的数据存进pinia
  // console.log(itemStores.commodityFrom);
  router.push({ // './itemUpdate'
    path : '../itemUpdate',
    query: {
      data: JSON.stringify(row)
    }
  })
}
// 删除商品
const delItem = (id:number) => {
    // 弹出框的内容 上面的是提示信息,下面的是弹出标题
  ElMessageBox.confirm(
    '是否删除该分类,确定删除吗?',
    '删除分类',
  ).then(() => {
    // delCate是删除商品的提示信息请求 不需更换接口
    delCate({id}).then(res => {
      if(res.data.code === 200){
        ElMessage({
          // 提示的内容
          message: res.data.msg,
          type: 'success',
          // 删除后多少秒后执行后面onClose里面的代码
          duration: 1500,
          onClose: () => {
            // 删除成功后刷新页面
            router.go(0)
          }
        })
      }else {
        ElMessage({
        message: "删除商品失败",
        type: 'error'
      })
      }
    })
  })
}

// 点击开关修改当前分类 启用状态
const swicthOnsale = (id:number, enable:boolean) => {
  // updateCate是状态开关提示 不需更换接口
  updateCate({
    id,
    enable
  }).then(res => {
    // console.log(res);
    
    if (res.data.code === 200) {
          // 成功后 弹出消息提示框提醒用户
          ElMessage({
            type: 'success',
            message: res.data.msg,
            duration: 1500,
            onClose: () => {
              // 刷新页面
              // router.go(0)
            }
          })
        } else {
          ElMessage({
            type: 'error',
            message: res.data.msg
          })
        }
  })
}
// 关键字筛选
const onSearch = () => {
  fetchItem()
  keyWords.value = ''
  const loading = ElLoading.service({
    lock: true,
    text: 'Loading',
    background: 'rgba(0, 0, 0, 0.7)'
  })
  setTimeout(() => {
    loading.close()
  }, 2000)
}
// pageSizeChange 改变时触发该事件
const sizeChange = () => {
  fetchItem()
}
// pageChange 改变时触发该事件
const pageChange = () => {
  fetchItem()
}
// 获取分类列表
const fetchItem = () => {
  items.value = draftsStores.drafts
  // 分页数据
  total.value = draftsStores.drafts.length
  console.log('page++++++>',page,'pageSize--------->',pageSize,'keyWords==========>',keyWords);
  
  // console.log(JSON.parse(localStorage.getItem('drafts')));
  fetchItemLists({
    page: page.value,
    pageSize: pageSize.value,
    keyWords: keyWords.value
  }).then(res =>{
    if (res.data.code === 200) {
      // 分页数据还是要从接口里面拿
      // total.value = res.data.data.total
      // console.log(res);
      
      // descs.value = res.data.data.lists.desc
    }
  })
}
// 初始化前获取
onMounted(() => {
  fetchItem()
})
</script>

<style lang="scss" scoped>
el-table-column {
  float: auto;
  margin: 0 auto;
}
.textTag{
  width: 50px;
  color: rgb(216, 227, 67);
}

.tooltip-base-box {
  width: 100px;
}
.tooltip-base-box .row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.tooltip-base-box .center {
  justify-content: center;
}
.tooltip-base-box .box-item {
  width: 110px;
  margin-top: 10px;
}
.cell{
  text-align: center;
}
</style>
<style>
.text-hove{
  max-width:300px
}
</style>